<script setup> 
    import { Vue3SeamlessScroll } from "vue3-seamless-scroll"

    const props = defineProps({
        list: {
            type: Array,
            default: []
        }
    })

    const emit = defineEmits('clickDetails')

    const handleClick = () => {
        emit('clickDetails')
    }

</script>

<template>
    <div class="affair-open-warp card-box">
        <div class="card-title flex-between">
            <div class="flex-center">
                <img src="../../../assets/images/card-title-icon-1.png">
                党员阵地
            </div>
            <div class="details-text" @click="handleClick">详情 ></div>
        </div>
        
        <div class="list-wrap">
            <div class="item head flex">
                <span class="index">序号</span>
                <span class="name">姓名</span>
                <span class="sex">性别</span>
                <span class="sex">年龄</span>
                <span class="sex">民族</span>
                <span class="phone">入党时间</span>
                <span class="type">所属党支部</span>
            </div>
            <vue3-seamless-scroll 
                :list="props.list" 
                class="list-item"
                hover
                wheel
                :singleHeight="36"
                :singleWaitTime="3000"
                :limitScrollNum="6"
            >
                <div class="item flex" v-for="(item, index) in props.list" :key="index">
                    <span class="index">{{ index + 1 }}</span>
                    <span class="name">{{ item.name }}</span>
                    <span class="sex">{{ item.sex == 1 ? '男' : '女' }}</span>
                    <span class="sex">{{ item.age }}</span>
                    <span class="sex">{{ item.nation == 1 ? '汉' : '满' }}</span>
                    <span class="phone">{{ item.joinPartyDate }}</span>
                    <span class="type">{{ item.partyBranchId_dictText }}</span>
                </div>
            </vue3-seamless-scroll>
        </div>

    </div>
</template>

<style lang="less" scoped>
    .affair-open-warp{
        height: 325px;
        margin-top: 10px;

        .list-wrap{
            height: 265px;
            overflow: hidden;
            padding: 10px 20px;

            .list-item{
                height: 230px;
                overflow: hidden;
            }
            
            .item{
                padding: 10px 0;
                cursor: pointer;

                &.head span{
                    color: #BDDEFF;
                }

                span{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 16px;
                    color: #fff;
                    text-align: center;
                    flex: 1;
                }

                .index{
                    flex: 0.5;
                }

                .name{
                    flex: 0.6;
                }

                .sex{
                    flex: 0.5;
                }

                .phone{
                    flex: 1;
                }

                .type{
                    flex: 1;
                }

                .area{
                    flex: 1.3;
                }
            }
        }
    }
</style>